{% extends "public/style1/common/base.html" %}

{% block title %}
{{ article.title }}
{% endblock %}


{% block style_link %}
<link rel="stylesheet" href="/admin/edit-md/css/editormd.css"/>
<link rel="stylesheet" href="/common/sweetalert2/sweetalert2.min.css"/>
{% endblock %}


{% block body_class %}single{% endblock %}

{% block content %}
<div class="crt-container-sm" id="contact-app">
    <div class="crt-paper-layers">
        <div class="crt-paper clearfix">
            <div class="crt-paper-cont clear-mrg">
                <article class="post hentry">
                    <div class="post-media">
                        {% if article.pic_url !='' %}
                        <div class="post-image"><img src="{{ article.pic_url }}">
                        </div>
                        {% endif%}
                    </div>
                    <div class="padd-box-sm">
                        <header class="post-header text-center">
                            <h1 class="post-title entry-title text-upper">{{ article.title }}</h1>
                            <div class="post-header-info">
                                        <span class="posted-on">
                                            <span class="screen-reader-text">Posted on </span>
                                             <a href="/view/articles/detail/{{ article.uuid }}" rel="bookmark">
                                                 <time class="post-date published" datetime="{{ article.create_at }}">
                                                     {{ article.create_at }}
                                                 </time>
                                                 <time class="post-date updated" datetime="{{ article.update_at }}">
                                                     {{ article.update_at }}
                                                 </time>
                                            </a>
                                        </span>
                                <span class="post-author vcard">
                                    by <a class="url fn n" href="/view/about" rel="author">Author</a>
                                    </span>
                            </div>
                        </header>
                        <div class="post-content entry-content editor clearfix clear-mrg">
                            <h3 class="text-upper">摘要</h3>
                            <p>{{ article.summary }}</p>
                            <div id="markdown-content" style="padding: 5px;">
                                <label for="append-test"></label>
                                <textarea id="append-test" style="display:none;">{{ article.content }}</textarea>
                            </div>
                            <footer class="post-footer">
                                <div class="post-footer-top brd-btm">
                                    <div class="post-footer-info">
                                                <span class="post-cat-links">
                                                    <span class="screen-reader-text">Categories</span>
                                                    <a href="#" rel="category tag">浏览{{ article.view_count }}次</a>&nbsp
                                                </span>
                                        <span class="post-line">|</span>
                                        <a href="" class="post-comments-count">{{ article.comment_count }} 热度</a>
                                    </div>
                                </div>

                                <div class="post-footer-btm">
                                    <div class="post-tags">
                                        <span class="screen-reader-text">Tags</span>
                                        {% for item in article.labels %}
                                        <a href="#" title="Nicaragua" rel="tag">{{ item.label_name }}</a>
                                        {% endfor %}
                                    </div>
                                </div>

                            </footer>
                        </div>
                    </div>
                </article>
                <div class="tab-content">
                    {% if login_info.is_login %}
                    <div class="comment-respond">
                        <div class="padd-box-sm">
                            <form class="comment-form" novalidate="">
                                <div class="form-group">
                                    <label class="form-label">想说的</label>
                                    <div class="form-item-wrap">
                                                    <textarea v-model="comment.content" class="form-item"
                                                              cols="45"
                                                              rows="8"
                                                              maxlength="65525" aria-required="true"
                                                              required="required"></textarea>
                                    </div>
                                </div>
                                <div class="form-submit form-item-wrap">
                                    <input @click="submitContact" class="btn btn-primary btn-lg"
                                           type="button" value="提交">
                                </div>
                            </form>
                        </div>
                    </div>
                    {% else %}
                    <div class="comment-respond">
                        <h2 id="reply-title2" class="title text-upper">
                            您还没有登录,登录后即可评论
                        </h2>
                    </div>
                    {% endif %}
                </div>
                <div id="comments" class="comments-area" style="display: none;">
                    <h2 class="title text-upper">评论</h2>
                    <div class="padd-box-sm">
                        <ol class="comment-list clear-list">
                            <li v-for="(item,index) in comments" :key="index" class="comment bypostauthor">
                                <article class="comment-body">
                                    <header class="comment-header">
                                        <div class="comment-author vcard">
                                            <img alt=""
                                                 :src="item.avatar"
                                                 class="avatar avatar-58 photo"
                                                 height="58" width="58">
                                            <strong class="fn">
                                                <a href="#" rel="external nofollow"
                                                   class="url">
                                                    {{ "{{ item.name }}" }}
                                                </a>
                                            </strong>
                                        </div>
                                        <div class="comment-date"> at <a href="#">
                                            <time datetime="">
                                                {{ "{{ item.time }}" }}
                                            </time>
                                        </a></div>
                                    </header>
                                    <div class="comment-content clear-mrg">
                                        <p>
                                            {{ "{{ item.content }}" }}
                                        </p>
                                    </div>
                                    <footer class="comment-footer">
                                        <div class="comment-replys-count">
                                            <a rel="nofollow"
                                               class="comment-replys-link"
                                               aria-label="Replys to Mr WordPress">
                                                {{ "{{ item.comments.length }}" }} 个回复
                                            </a>
                                        </div>
                                    </footer>
                                    <footer v-if="isLogin" class="comment-footer">
                                        <div class="comment-links">
                                            <a class="comment-reply-link"
                                               rel="nofollow"
                                               href="#"
                                               @click="reply({{ 'item' }})"
                                               aria-label="Reply to Mr WordPress">
                                                回复
                                            </a>
                                        </div>
                                    </footer>
                                </article>
                                <ol v-for="(child,index) in item.comments" :key="index" class="children clear-list">
                                    <li class="comment show-replies">
                                        <article class="comment-body">
                                            <header class="comment-header">
                                                <div class="comment-author vcard">
                                                    <img alt=""
                                                         :src="child.avatar"
                                                         class="avatar avatar-58 avatar-default photo"
                                                         height="58"
                                                         width="58">
                                                    <strong class="fn">
                                                        <a href="#"
                                                           rel="external nofollow" class="url">
                                                            {{ "{{ child.name }}" }}
                                                        </a>
                                                    </strong>
                                                </div>
                                                <div class="comment-date"> at <a href="#">
                                                    <time datetime="2016-07-04T11:33:08+00:00">
                                                        {{ "{{ child.time }}" }}
                                                    </time>
                                                </a></div>
                                            </header>
                                            <div class="comment-content clear-mrg">
                                                <p>
                                                    {{ "{{ child.content }}" }}
                                                </p>
                                            </div>
                                            <footer v-if="isLogin" class="comment-footer">
                                                <div class="comment-links">
                                                    <a class="comment-reply-link"
                                                       rel="nofollow"
                                                       href="#"
                                                       @click="reply({{ 'child' }})"
                                                       aria-label="Reply to Mr WordPress">
                                                        回复
                                                    </a>
                                                </div>
                                            </footer>
                                        </article>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block bottom_script %}
<script src="/common/js/jquery.min.js"></script>
<script src="/admin/edit-md/editormd.min.js"></script>
<script src="/admin/edit-md/lib/marked.min.js"></script>
<script src="/admin/edit-md/lib/flowchart.min.js"></script>
<script src="/admin/edit-md/lib/jquery.flowchart.min.js"></script>
<script src="/admin/edit-md/lib/prettify.min.js"></script>
<script src="/admin/edit-md/lib/raphael.min.js"></script>
<script src="/admin/edit-md/lib/sequence-diagram.min.js"></script>
<script src="/admin/edit-md/lib/underscore.min.js"></script>
<script src="/common/js/axios.min.js"></script>
<script src="/common/js/vue2.6.min.js"></script>
<script src="/common/js/request.js"></script>
<script src="/common/sweetalert2/sweetalert2.min.js"></script>
<script>
    $(function () {
        testEditormdView2 = editormd.markdownToHTML("markdown-content", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解
            flowChart: true,  // 默认不解
            sequenceDiagram: true,  // 默认不解
        });
    });


    let detail_contactApp = new Vue({
        el: '#contact-app',
        data: {
            comment: {
                name: "",
                content: '',
                avatar: '',
                uuid: '{{article.uuid}}',
                comments: [],
            },
            comments: [],
            isLogin: false,
        },
        methods: {
            reply(item) {
                this.popUpReplyWindow().then(result => {
                    this.submitReply(item, result).then(response => {
                        swal({
                            title: '评论完成',
                            text: "你的评论已提交等待管理员审核",
                            confirmButtonText: '确认',
                            confirmButtonColor: 'Green',
                        })
                    }).catch(error => {
                        swal({
                            title: '回复评论失败',
                            text: "不好意思！你未能成功回复评论,请刷新重试",
                            confirmButtonText: '确认',
                            confirmButtonColor: 'Green',
                        })
                    })
                })
            },
            submitReply(item, message) {
                return request({
                    url: baseUrl + "/api/comment/save_comment",
                    method: 'post',
                    data: {"item": item, 'message': message, 'flag': true, 'article_uuid': '{{article.uuid}}'},
                })
            },
            popUpReplyWindow() {
                return swal({
                    title: '请输入评论',
                    input: 'text',
                    inputAttributes: {
                        autocapitalize: 'off'
                    },
                    showCancelButton: true,
                    confirmButtonText: '提交',
                    showLoaderOnConfirm: true,
                    allowOutsideClick: () => !swal.isLoading()
                });
            },
            getLoginInfo() {
                request({
                    url: baseUrl + "/api/login/info",
                    method: 'get',
                }).then(res => {
                    if (res === {}) {

                    } else {
                        this.comment.name = res.data.user.nick_name
                        this.comment.avatar = res.data.user.avatar;
                        this.isLogin = true
                    }
                }).catch(e => {

                });
            },
            getContactComments() {
                request({
                    url: baseUrl + "/api/article/comment/{{article.uuid}}",
                    method: 'get',
                    data: this.comment,
                }).then(res => {
                    if (res['code'] == 200) {
                        this.comments = res['data']
                    }
                }).catch(e => {
                    swal({
                        title: '评论失败',
                        text: "不好意思！你的评论为未成功提交,请刷新重试",
                        confirmButtonText: '确认',
                        confirmButtonColor: 'Green',
                    })
                });
            },
            submitContact() {
                let comment = this.comment
                this.comments.unshift({...comment})
                request({
                    url: baseUrl + "/api/article/comment",
                    method: 'post',
                    data: this.comment,
                }).then(res => {
                    if (res['code'] == 200) {
                        swal({
                            title: '评论完成',
                            text: "你的评论已提交等待管理员审核",
                            confirmButtonText: '确认',
                            confirmButtonColor: 'Green',
                        })
                        this.comments = res['data']
                    }
                }).catch(e => {
                    swal({
                        title: '评论失败',
                        text: "不好意思！你的评论为未成功提交,请刷新重试",
                        confirmButtonText: '确认',
                        confirmButtonColor: 'Green',
                    })
                });
            }
        },
        created() {
            this.getLoginInfo();
            this.getContactComments();
            //$("#comments").css("display", "block");
        },
    });
</script>

{% endblock %}
